<template>
  <div class="bgh">
    <header id="header" class="mui-bar mui-bar-nav">
      <h1 class="mui-title">{{ $route.query.word }}</h1>
      <button
        class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"
        @click="godingdan"
      >
        <span class="mui-icon mui-icon-left-nav" />
        {{ $route.query.name }}
      </button>
    </header>
    <div style="height:50px"></div>
    <div v-if="orderdetail.mailtype==1" class="div1">
      <div class="mui-input-row">
        <label class="fs14">提货人：</label>
        <input
          type="text"
          class="fs14 tc"
          placeholder="请填写收货人姓名"
          v-model="orderdetail.addressee"
          readonly="readonly"
        />
      </div>
      <div class="mui-input-row">
        <label class="fs14">手机号码：</label>
        <input
          type="number"
          class="fs14 tc"
          placeholder="请填写手机号码"
          v-model="orderdetail.tel"
          readonly="readonly"
        />
      </div>
      <div class="mui-input-row">
        <label class="fs14">商家地址：</label>
        <input
          class="fs14 tc"
          readonly="readonly"
          type="text"
          v-model="orderdetail.saddr"
          placeholder="请选择商家地址"
        />
      </div>
      <div class="mui-input-row">
        <label class="fs14">商家电话：</label>
        <input
          type="number"
          class="fs14 tc"
          placeholder="请填写手机号码"
          v-model="orderdetail.stel"
          readonly
        />
      </div>
    </div>
    <div v-else class="div1">
      <div class="mui-input-row">
        <label class="fs14">收件人：</label>
        <input
          type="text"
          class="fs14"
          placeholder="请填写收货人姓名"
          v-model="orderdetail.addressee"
          readonly
        />
      </div>
      <div class="mui-input-row">
        <label class="fs14">手机号码：</label>
        <input type="number" class="fs14" placeholder="请填写手机号码" v-model="orderdetail.tel" readonly />
      </div>
      <div class="mui-input-row" style="position: relative">
        <label class="fs14">地址：</label>
        <input
          class="fs14"
          type="text"
          placeholder="请选择收货地址"
          v-model="orderdetail.address"
          readonly
        />
      </div>
    </div>
    <detaillist :detaillists="orderdetail.odlist"></detaillist>
    <div v-if="orderdetail.mailtype==0">
      <div class="detail-ps" style="border-bottom:1px solid #ddd">
        <span>配送方式：</span>
        <span style="display: inline-block;float: right;color: #aaa;">普通快递</span>
      </div>
      <div class="detail-ps" style="border-bottom:1px solid #ddd">
        <span>运费：</span>
        <span style="display: inline-block;float: right;color: #aaa;">￥{{orderdetail.yunfei}}</span>
      </div>
      <div class="detail-ps">
        <span>物流信息：</span>
        <span style="display: inline-block;float: right;color: #aaa;">
          <input
            class="fd-input"
            v-if="orderdetail.expressnumber==''||orderdetail.expressnumber==null"
            readonly
            v-model="notany"
          />
          <input class="fd-input" v-else readonly v-model="orderdetail.expressnumber" />
        </span>
      </div>
    </div>
    <div class="cart-bottom" style="bottom:0px;" v-if="orderdetail.paystatus=='0'">
      <span
        style="display:inline-block;width:50%;line-height:40px;display:inline-block;
    padding-left: 20px;"
      >
        合计:
        <sapn style="color:rgb(0, 178, 163);">￥{{orderdetail.amount}}</sapn>
      </span>

      <button
        style="border-radius:0;height:40px;border:none;background:rgb(0, 178, 163);color:#fff;float:right"
        @click="orderCarAdd()"
      >去支付</button>
    </div>
  </div>
</template>

<script>
import detaillist from '~/components/list/detaillist.vue'
export default {
  layout: 'default3',
  components: {
    detaillist
  },
  data() {
    return {
      prepayid2: {},
      ts: this.newStore(),
      orderdetail: {},
      notany: '暂未发货'
    }
  },
  created() {
    this.getorderdetail()
  },
  methods: {
    //支付
    orderCarAdd() {
      const res = {
        token: localStorage.getItem('token'),
        orderno: this.orderdetail.orderno
      }
      this.spost(this.ts, '/orderc/orderPay', res).then(ts => {
        if ((ts.d.flag = '200')) {
          this.prepayid2 = ts.d.data
          this.PayMoney()
        }
      })
    },
    PayMoney() {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            this.onBridgeReady,
            false
          )
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        this.onBridgeReady()
      }
    },
    onBridgeReady() {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          timeStamp: `${this.prepayid2.timeStamp}`, // 时间戳，自1970年以来的秒数
          appId: `${this.prepayid2.appId}`, // 公众号名称，由商户传入
          nonceStr: `${this.prepayid2.nonceStr}`, // 随机串
          package: `${this.prepayid2.package}`, //
          signType: `${this.prepayid2.signType}`, // 微信签名方式
          paySign: `${this.prepayid2.paySign}` // 微信签名
        },
        res => {
          // alert(JSON.stringify(res))
          // alert(`输入密码后从微信服务器返回来的支付结果：${JSON.stringify(res)}`);
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            console.log('res.err_msg', res.err_msg)
            this.getorderlist()
            this.getorderlist2()
            // this.$router.push({ name: 'eporder' })
            // this.$router.push({
            //   name: 'chufang-payOff',
            //   query: {
            //     je_sf: this.je_sf,
            //     payResult: true,
            //     payMessage: '支付成功'
            //   }
            // })
          } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
            // this.$router.push({ name: 'payOff', query: { je_sf: this.je_sf, payResult: false, payMessage: '取消支付' } });
            // this.showAlert = true
            // this.alertText = '已取消支付'
            console.log('res.err_msg', res.err_msg)
          } else {
            // this.$router.push({ name: 'payOff', query: { je_sf: this.je_sf, payResult: false, payMessage: res.err_msg } });
            // this.showAlert = true
            // this.alertText = `支付失败,错误信息${res.err_msg}`
            console.log('res.err_msg', res.err_msg)
          }
        }
      )
    },
    godingdan() {
      this.$router.push({
        name: 'forder',
        query: {
          from: '我的',
          word: '我的订单'
        }
      })
    },
    getorderdetail() {
      const res = {
        token: localStorage.getItem('token'),
        orderid: this.$route.query.orderid
      }
      this.spost(this.ts, '/Orderc/orderShopDetail', res).then(ts => {
        if (ts.d.flag == '200') {
          this.orderdetail = ts.d.data

          console.log(this.orderdetail.odlist, '000')
        }
      })
    }
  }
}
</script>

<style>
.fd-input {
  text-align: right;
  font-size: 14px;
}
.detail-ps {
  background: #fff;
  padding: 10px 15px;
  font-size: 14px;
}
.mui-input-row {
  border-bottom: 1px solid #ddd;
}
.cart-bottom {
  position: fixed;
  background: #fff;

  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.div1 {
  background: #fff;
  margin: 10px 0;
}
</style>
